<template>
    <div>
        <el-row>
            <el-col :span="12" align="left">
                <span>身份证：</span>
                <el-input placeholder="请输入身份证号" v-model="idCard" clearable></el-input>
            </el-col>
            <el-col :span="12" align="left">
                <span>客户姓名：</span>
                <el-input placeholder="请输入姓名" v-model="customerName" clearable style="width:50%;"></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" align="left">
                <span>联系电话：</span>
                <el-input placeholder="请输入联系电话" v-model="telPhone" clearable></el-input>
            </el-col>
            <el-col :span="12" align="left">
                <span>部门：</span>
                <el-select v-model="department" placeholder="请选择部门" clearable>
                <el-option
                    v-for="item in departmentArr"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" align="left">
                <span>首次到账日：</span> 
                <el-date-picker
                    v-model="firstReceivedDate"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width:60%;">
                </el-date-picker>
            </el-col>
            <el-col :span="12" align="left">
                <span>末次到账日:</span> 
                <el-date-picker
                    v-model="lastReceivedDate"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width:60%;">
                </el-date-picker>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" align="left">
                <span>实际最迟退出日：</span> 
                <el-date-picker
                    v-model="realInvestmentExitDate"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width:60%;">
                </el-date-picker>
            </el-col>
            <el-col :span="12" align="left">
                <span>进账日:</span> 
                <el-date-picker
                    v-model="bankReceivedDate"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width:60%;">
                </el-date-picker>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4" align="left">
                <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="16"></el-col>
            <el-col :span="4" align="right">
                <el-button type="success" @click="exports" :disabled="exportLoading" :loading="exportLoading">导出数据</el-button>
            </el-col>
        </el-row> 
        <el-table
              :data="table"
              v-loading="tableLoading"
              border
              stripe 
              size="small"
              height="500"
              style="width: 100%">
            <el-table-column
                label="资产受让人"
                prop="customerName"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                label="身份证"
                prop="idCard"
                align="center"
                width="150">
            </el-table-column> 
            <el-table-column
                label="生日"
                prop="birthday"
                align="center"
                width="120">
            </el-table-column>   
            <el-table-column
                label="年龄"
                prop="age"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="性别"
                prop="sex"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="联系电话"
                prop="telPhone"
                align="center"
                width="120">
            </el-table-column>   
            <el-table-column
                label="联系地址"
                prop="address"
                align="center"
                width="200">
            </el-table-column>  
            <el-table-column
                label="投资总额"
                prop="contractCountMoney"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="投资合同数"
                prop="contractCountNumbers"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="服务人员"
                prop="salemanName"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="小程序服务人员"
                prop="investmentAdviser"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="部门"
                prop="department"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="小程序服务人员部门"
                prop="investmentAdviserDepartment"
                align="center"
                width="150">
            </el-table-column> 
            <el-table-column
                label="标准业绩"
                prop="standardCoefficientFee"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="存续标准业绩"
                prop="subsistCoefficient"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="存续投资金额"
                prop="subsistTotalRevenue"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="总积分"
                prop="integral"
                align="center"
                width="120">
            </el-table-column>  5
            <!-- <el-table-column
                label="剩余积分"
                prop="residualIntegral"
                align="center"
                width="120">
            </el-table-column> -->
            <el-table-column
                label="小程序积分"
                prop="xcxIntegral"
                align="center"
                width="120">
            </el-table-column>  
           <el-table-column
                label="用户状态"
                prop="isDeleteCN"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="首次到账日"
                prop="firstBankReceivedDate"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="末次到账日"
                prop="lastBankReceivedDate"
                align="center"
                width="120">
            </el-table-column> 
        </el-table>
        <el-pagination
            background
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="totalCount"
            style="margin:50px;">
        </el-pagination>
        <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
    </div>
</template>

<script>
var searchInfo={
    idCard:"",
    customerName:"",
    telPhone:"",
    endBankReceivedDate:"",
    department:"",
    startFirstReceivedDate:"",
    endFirstReceivedDate:"",
    startLastReceivedDate:"",
    endLastReceivedDate:"",
    startBankReceivedDate:"",
    endBankReceivedDate:"",
    startRealInvestmentExitDate:"",
    endRealInvestmentExitDate:"",
};
var startFirstReceivedDate="";
var endFirstReceivedDate="";
var startLastReceivedDate="";
var endLastReceivedDate="";
var startBankReceivedDate="";
var endBankReceivedDate="";
var startRealInvestmentExitDate="";
var endRealInvestmentExitDate="";
export default {
    data(){
        return{
            exportLoading:false,
            idCard:"",
            customerName:"",
            telPhone:"",
            tableLoading:false,
            table:[],
            department:"",
            departmentArr:"",
            firstReceivedDate:"",
            lastReceivedDate:"",
            realInvestmentExitDate:"",
            bankReceivedDate:"",
            currentPage: 1,
            pageSize: 20,
            totalCount: 0,
        }
    },
    mounted(){
        this.initData()
        this.getRequest("/auditor/getDepartmentList").then(resp=>{
            if(resp &&resp.data.status==200){
                this.departmentArr=resp.data.obj
            }
        })
    },
    methods:{
        requestInfo(){
            if(this.firstReceivedDate){
                startFirstReceivedDate=this.firstReceivedDate[0];
                endFirstReceivedDate=this.firstReceivedDate[1];
            }else{
                startFirstReceivedDate="";
                endFirstReceivedDate="";
            }
            if(this.lastReceivedDate){
                startLastReceivedDate=this.lastReceivedDate[0];
                endLastReceivedDate=this.lastReceivedDate[1];
            }else{
                startLastReceivedDate="";
                endLastReceivedDate="";
            }
            if(this.bankReceivedDate){
                startBankReceivedDate=this.bankReceivedDate[0];
                endBankReceivedDate=this.bankReceivedDate[1];
            }else{
                startBankReceivedDate="";
                endBankReceivedDate="";
            }
            if(this.realInvestmentExitDate){
                startRealInvestmentExitDate=this.realInvestmentExitDate[0];
                endRealInvestmentExitDate=this.realInvestmentExitDate[1];
            }else{
                startRealInvestmentExitDate="";
                endRealInvestmentExitDate="";
            }
            this.tableLoading=true;
            this.postRequest("/api/report/yun_xiang_hui/query_yxh", {
                idCard:this.idCard,
                customerName:this.customerName,
                telPhone:this.telPhone,
                startBankReceivedDate:startBankReceivedDate,
                endBankReceivedDate:endBankReceivedDate,
                startFirstReceivedDate:startFirstReceivedDate,
                endFirstReceivedDate:endFirstReceivedDate,
                startLastReceivedDate:startLastReceivedDate,
                endLastReceivedDate:endLastReceivedDate,
                startRealInvestmentExitDate:startRealInvestmentExitDate,
                endRealInvestmentExitDate:endRealInvestmentExitDate,
                department:this.department,
                pageIndex: this.currentPage,
                pageSize: this.pageSize
            })
            .then(resp => {  
                this.tableLoading=false;
                if (resp && resp.data.status == 200){
                    console.log(resp)
                    this.table=resp.data.obj.rows;
                    this.totalCount = resp.data.obj.total;
                    searchInfo={
                        idCard:this.idCard,
                        customerName:this.customerName,
                        telPhone:this.telPhone,
                        startBankReceivedDate:startBankReceivedDate,
                        endBankReceivedDate:endBankReceivedDate,
                        department:this.department,
                        startFirstReceivedDate:startFirstReceivedDate,
                        endFirstReceivedDate:endFirstReceivedDate,
                        startLastReceivedDate:startLastReceivedDate,
                        endLastReceivedDate:endLastReceivedDate,
                        startRealInvestmentExitDate:startRealInvestmentExitDate,
                        endRealInvestmentExitDate:endRealInvestmentExitDate,
                    }
                }
            });
        },
        initData(){
          this.requestInfo()
        },
        search(){
            this.currentPage = 1;
            this.requestInfo()
        },
        //列表当前页改变
        currentChange: function(currentChange) {
            this.currentPage = currentChange;
            this.requestInfo()
        },
        exports(){
            this.exportLoading=true;
            console.log(searchInfo)
            var address=`/api/report/yun_xiang_hui/yun_xiang_hui_export?idCard=${searchInfo.idCard}&&customerName=${searchInfo.customerName}&&telPhone=${searchInfo.telPhone}&&startBankReceivedDate=${searchInfo.startBankReceivedDate}&&endBankReceivedDate=${searchInfo.endBankReceivedDate}&&department=${searchInfo.department}&&startFirstReceivedDate=${searchInfo.startFirstReceivedDate}&&endFirstReceivedDate=${searchInfo.endFirstReceivedDate}&&startLastReceivedDate=${searchInfo.startLastReceivedDate}&&endLastReceivedDate=${searchInfo.endLastReceivedDate}&&startRealInvestmentExitDate=${searchInfo.startRealInvestmentExitDate}&&endRealInvestmentExitDate=${searchInfo.endRealInvestmentExitDate}`
            this.common.downloadFile(address);
            setTimeout(()=>{
                this.exportLoading=false;
            },2000) 
        }
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 50px;
  line-height: 50px;
}
.el-input{
    width: 70%;
}
</style>
